<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>折线</title>
</head>
<body>
<canvas id="a_canvas" width="300" height="300"></canvas>

<script type="text/javascript">
    (function (){

        window.addEventListener("load", function(){

            var data = [80,92,104,110,68,50,45,90,74,68,98,103];

            // 获取上下文
            var a_canvas = document.getElementById('a_canvas');
            var context = a_canvas.getContext("2d");


            // 绘制背景
            var gradient = context.createLinearGradient(0,0,0,300);


            gradient.addColorStop(0,"#e0e0e0");
            gradient.addColorStop(1,"#ffffff");


            context.fillStyle = gradient;

            context.fillRect(0,0,a_canvas.width,a_canvas.height);


            // 描绘边框
            var grid_cols = data.length + 1;
            var grid_rows = 4;
            var cell_height = a_canvas.height / grid_rows;
            var cell_width = a_canvas.width / grid_cols;
            context.lineWidth = 1;
            context.strokeStyle = "#a0a0a0";

            // 结束边框描绘
            context.beginPath();
            // 准备画横线
            for (var col = 0; col <= grid_cols; col++) {
                var x = col * cell_width;
                context.moveTo(x,0);
                context.lineTo(x,a_canvas.height);
            }
            // 准备画竖线
            for(var row = 0; row <= grid_rows; row++){
                var y = row * cell_height;
                context.moveTo(0,y);
                context.lineTo(a_canvas.width, y);
            }
            context.lineWidth = 1;
            context.strokeStyle = "#c0c0c0";
            context.stroke();

            var max_v = 0;
            for(var i = 0; i<data.length; i++){
                if (data[i] > max_v) { max_v = data[i]};
            }

            max_v = max_v * 1.1;
            // 将数据换算为坐标
            var points = [];
            for( var i=0; i < data.length; i++){
                var v= data[i];
                var px = cell_width *　(i +1);
                var py = a_canvas.height - a_canvas.height*(v / max_v);
                points.push({"x":px,"y":py});
            }
            // 绘制折现
            context.beginPath();
            context.moveTo(points[0].x, points[0].y);
            for(var i= 1; i< points.length; i++){
                context.lineTo(points[i].x,points[i].y);
            }


            context.lineWidth = 2;
            context.strokeStyle = "#ee0000";
            context.stroke();

            //绘制坐标图形
            for(var i in points){
                var p = points[i];
                context.beginPath();
                context.arc(p.x,p.y,6,0,2*Math.PI);
                context.fillStyle = "#ee0000";
                context.fill();
            }
        },false);
    })();
</script>
</body>
</html>
